<template>
  <div id="app">
      <div>
          name:<input type="text" v-model="value.name">
          id:<input type="text" v-model="value.id">
          <button @click="doAdd">添加</button>
      </div>
      <div v-for="item of arr" :key="item.id">
          <input type="checkbox" @click="handleClick(id)">{{item.name}}{{index}}
      </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      value:{name:"",id:""},
      arr:[
        {name:"html",id:1001},
        {name:"css",id:1002},
        {name:"js",id:1003}
      ]
    }
  },
  methods:{
    doAdd(){
      var value = this.value;
      var obj = Object.assign({},value);
      this.arr.unshift(obj)
    },
    handleClick(id){
      var lists = this.arr.filter(item=>item.id !=id);
      this.arr = lists;
      this.arr.splice(id,1)
    }
  }
}
</script>


